<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代理</title>
</head>
<body>
<div id="app">
    <div>
        <input type="text" id="txt">
        <p id="show"></p>
    </div>
    <div>
        <input type="text" id="txt2">
        <p id="show2"></p>
    </div>
</div>
<script>
    var obj = {};
    let val = '';
    Object.defineProperty(obj, 'txt', {
        get: function () {
            return val;
        },
        set: function (newValue) {
            document.getElementById('txt').value = newValue;
            document.getElementById('show').innerHTML = newValue;
            val = newValue;
        }
    });
    document.getElementById('txt').addEventListener('keyup', function (e) {
        obj.txt = e.target.value;
    });

    const proxy = new Proxy({}, {
        get: function (target, prop) {
            return target[prop]
        },
        set: function (target, prop, value) {
            target[prop] = value;
            if (prop === 'txt') {
                document.getElementById('txt2').value = value;
                document.getElementById('show2').innerHTML = value;
            }
        }
    });
    document.getElementById('txt2').addEventListener('keyup', function (e) {
        proxy.txt = e.target.value
    });
</script>
</body>
</html>
